<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>crawler-manager-admin-dataPre</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/gloabl.css">
    <link rel="stylesheet" href="/css/footer.css">

    <style>
        main {
            background: #eeeeee;
            width: 100%;
            height: auto;
            padding: 0;
        }

        .container {
            padding: 10px 30px;
            margin: 0 5%;
        }
    </style>
</head>
<body>
<#include "include/header.ftl">
<main id="main">
    <div class="container">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this" onclick="handleClick('all')">全部</li>
                        <#list jobNames as item>
                            <li id="id${item_index}" onclick="handleClick('${item}')">${item}</li>
                        </#list>
                    </ul>
                    <ul id="newsList" class="fly-list"></ul>
                </div>

            </div>
        </div>
    </div>
</main>
<#include "include/footer.ftl">
</body>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/gloab.js"></script>
<script type="text/javascript">

    function checkImageExist(item, index) {
        if (item.imageurl1 && index === 1) {
            return `<img src="` + item.imageurl1 + `" width="200px" lay-src>`;
        } else if (item.imageurl2 && index === 2) {
            return `<img src="` + item.imageurl2 + `" width="200px" lay-src>`;
        } else if (item.imageurl3 && index === 3) {
            return `<img src="` + item.imageurl3 + `" width="200px" lay-src>`;
        } else
            return "";
    }

    function formatTime(value) {
        if (value == null || value == undefined) {
            return "";
        }
        // console.log(value);
        var date = new Date(value);
        Y = date.getFullYear(),
            m = date.getMonth() + 1,
            d = date.getDate(),
            H = date.getHours(),
            i = date.getMinutes(),
            s = date.getSeconds();
        return Y + '-' + m + '-' + d + " " + H + ":" + i;
    }

    function checkCtagExist(value) {
        if (value !== null && value.length > 0) {
            if ('热点' === value) {
                return `<span class="layui-badge layui-bg-red">` + value + `</span>`;
            } else if ('广告' === value) {
                return `<span class="layui-badge layui-bg-orange">` + value + `</span>`;
            }
        }
        return "";
    }

    function checkType() {

    }

    let jobName = "all";

    function handleClick(item) {
        jobName = item;
        layui.loadFlow();
    }

    layui.use(['element', 'flow', 'layer'], function () {
        const flow = layui.flow;
        const layer = layui.layer;
        const element = layui.element;
        // layui.test();

        let imgAlert = window.sessionStorage.getItem("imgAlert");
        if (!imgAlert) {
            layer.open({
                type: 2,
                title: '',
                content: ['/html/fixImage.html'],
                area: [700 + 'px', 650 + 'px'],
                end: function () {
                    window.sessionStorage.setItem("imgAlert", "true");
                }
            })
        }

        layui.loadFlow();
    });

    layui.define(['flow', 'layer'], function (exports) {
        const flow = layui.flow;
        const layer = layui.layer;
        const $ = layui.jquery;
        exports('loadFlow', function () {
            //清除前一次加载的dom 结构
            $("#newsList").empty();

            //开启图片懒加载
            flow.lazyimg();
            flow.load({
                elem: '#newsList' //指定列表容器
                , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                    // console.log(page, next);
                    let lis = [];
                    // 以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    $.get('/newsList/' + page + '/' + jobName, function (res) {
                        //假设你的列表返回在data集合中
                        layui.each(res.data, function (index, item) {
                            lis.push(`
                        <li>
                            <h2>
                                ` + checkCtagExist(item.ctag) + `
                                <a href="` + item.url + `" target="_blank">` + item.title + `</a>
                            </h2>
                            <div class="fly-list-info">
                                <div>` + (item.abs === null ? '' : item.abs) + `</div>
                                <div>
                                    ` + checkImageExist(item, 1) + checkImageExist(item, 2) + checkImageExist(item, 3) + `
                                </div>
                                <div>
                                    ` + item.site + ` &nbsp;&nbsp;&nbsp;&nbsp; ` + formatTime(item.ts) + `
                                </div>
                            </div>
                            <div class="fly-list-badge">
<!--                                <span class="layui-badge layui-bg-gray">灰</span>-->
                            </div>
                        </li>

                        `);
                        });

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //total 为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.total);

                        layui.use('element', function () {
                            var element = layui.element;
                            element.init();
                        });

                    });
                }
            });
        })
    })
</script>
</html>